<template>
    <div class="panel">
        <div class="panel-head">
            <div class="panel-head-l">文件预览</div>
        </div>
        <div class="panel-body">
            <el-tag>fGetFileTypeByName 方法只需要传入文件名称</el-tag>
            <br /><br />
            <el-image style="width: 100px; height: 100px;"
                      :src="sImageUrl"
                      :preview-src-list="aImageUrlList">
            </el-image>
            <br /><br />
            <el-tag>非 el-image 触发预览需要使用 el-image-viewer</el-tag>
            <br /><br />
            <el-button type="primary"
                       @click="fBtnClick('img.png')">预览图片</el-button>
            <el-button type="primary"
                       @click="fBtnClick('img.DOC')">预览文档</el-button>
            <el-button type="primary"
                       @click="fBtnClick('img')">预览其他</el-button>
            <el-image-viewer v-if="bIsImage"
                             :on-close="fCloseImage"
                             :initial-index="0"
                             :url-list="aImageUrlList" />
        </div>
    </div>
</template>

<script>
    import { URLS_COM } from '@/urls';
    import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
    export default {
        components: {
            ElImageViewer
        },
        data() {
            return {
                sTest: 'img.png', //测试文件名称 img.png img.DOC img
                bIsImage: false, //图片预览组件默认隐藏
                sImageUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', //图片预览地址
                aImageUrlList: [
                    'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                    'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
                ]
            }
        },
        //**** methods
        methods: {
            //*** 接口
            //*** 事件
            //文件预览按钮点击事件
            fBtnClick(sTest) {
                const sType = this.G_API.fGetFileTypeByName(sTest);
                switch (sType) {
                    case 'image': //图片
                        this.sImageUrl = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg?id=1';//TODO 测试代码，项目中请用下一行替代
                        //this.sImageUrl = URLS_COM.i_pre + 'id';
                        this.bIsImage = true;
                        break;
                    case 'doc': //文档
                        this.G_API.fPreviewDoc('b8391f3e8b91466897f95015ffdaa8e8', '文档1.doc');
                        break;
                    default:
                        this.$message('该文件不支持预览');
                }
            },
            //*** 方法
            //关闭图片预览
            fCloseImage() {
                this.bIsImage = false;
            }
        }
    }
</script>

<style lang="less" rel="stylesheet" scoped>
</style>
